<template>
	<view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<!-- <view class="titleNview-placing"></view> -->
			<swiper class="carousel" circular @change="swiperChange" >
				<swiper-item>
					<view class='ceng' style="width: 100%;height: 100%;">
						<image :src="mdc_videofenmian"  v-show="xiaoshi" style="width: 100%;height: auto;"/>
						<!-- <view class='btn'>
							<image src="../../../static/selected.png" v-show="xiaoshi" @click="bindPlay()"  style="width: 30upx;height: auto;"/>
						</view> -->
						<video :src="mdc_video" objectFit="cover" @touchmove="mdc_move1($event)" controls id="mdcVideo" style="width:100%;height:100% "
						 v-show="mdc_show" >
						</video>
					</view>
				</swiper-item>
				<block v-for="(item, index) in bannerList" :key="index" class="carousel-item">
					<swiper-item>
						<image :src="item" />
					</swiper-item>
				</block>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				{{swiperCurrent+1}} / {{bannerList.length+1}}
			</view>
		</view>
		<view class="box-content">
			<view class="store-info">
				<view class="info-left">
					<image :src="infoData.shop_logo"></image>
				</view>
				<view class="info-right">
					<view class="info1">
						<text class="font34 colorfont">{{infoData.shop_name}} </text>
					</view>
					<view class="concern2" v-if="infoData.is_follow==0" @click="guanZhu(0)">
						关注店铺
					</view>
					<view class="concern" v-else @click="guanZhu(1)">
						已关注
					</view>

					<view class="info2">
						<text class="font20 color999" style="margin-right: 20upx;">{{infoData.follow||0}} 人关注</text>
						<text class="font20 color999">距我{{distanceStr}}km</text>
					</view>
				</view>
			</view>
			<view class="store-rate">
				<view class="">
					<text class="font24 colorfont">店铺星级</text>
					<image src="/static/home/store/star.png" mode="widthFix" v-for="item in rate" :key="item"></image>
					<image src="/static/home/store/star_off.png" mode="widthFix" v-for="item in rateOff" :key="item"></image>
				</view>
				<view class="font24 color999" style="margin-top: 20rpx;">
					由企惠平台评估，含销量、评价、服务等多项内容，等级越高店
					铺质量越好
				</view>

			</view>
			<view class="nav">
				<view class="navigator borderBtom borderTop" @click="clickAddress()">
					<image src='/static/home/store/address.png' mode="widthFix"></image>
					<view class="navigator-text">{{infoData.address}}</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator borderBtom" @click="getPhoneNumber()">
					<image src='/static/home/store/phone.png' mode="widthFix"></image>
					<view class="navigator-text">{{infoData.shop_service_tel}}</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator borderBtom" @click="navTo()">
					<image src='/static/home/store/time.png' mode="widthFix"></image>
					<view class="navigator-text">
						<view class="">
							{{infoData.business_hour}}
						</view>
					</view>
					<view class="navigator-arrow"></view>
				</view>
			</view>
			<view class="store-describe">
				<view class="font40 colorfont fontWeight">
					店铺简介
				</view>
				<view class="font28 color999 marginTop36">
					{{infoData.shop_content}}
				</view>
				<view class="marginTop40">
					<text class="font28 colorfont fontWeight">开店时间 </text>
					<text class="font28 color999" style="margin-left: 10upx;"> {{crateTime}}</text>
				</view>

			</view>
			<view class="nav">
				<view class="navigator borderBtom" @click="navTo('storeZz')">
					<text class="font28 colorfont fontWeight">企业资质</text>
					<view class="navigator-text2" style="width: 260px;">查看企业资质</view>
					<view class="navigator-arrow"></view>
				</view>
			</view>
			<view class="more-img">
				<view class="font40 colorfont fontWeight">
					更多图片
				</view>
				<view class="" style="max-height: 440upx;overflow: hidden;">
					<uni-grid :column="3" :show-border="false">
						<uni-grid-item v-for="(item, index) in infoData.shop_image" :key="index">
							<image :src="item" class="image" mode="aspectFill" @click="preImg(item,infoData.shop_image)" />
							<view class="modal-image update-info" v-if="index==5&&infoData.shop_image.length>6" style="border-radius: 32rpx;">
								<text class="font40 colorfff">{{infoData.shop_image.length-6}}+</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
				<view class="more-click" @click="navTo('storeList')">
					查看更多商品
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import {
		getPhoneNumber,
		distance,
		js_date_time
	} from '@/common/util'
	export default {
		components: {
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				swiperCurrent: 0,
				infoData: {},//数据
				authorize: {},//经纬度
				distanceStr: 0,
				bannerList:[],//banner图
				rate: [],//黄色五角星
				rateOff: [],//灰五角星
				//视频路径
				mdc_video: 'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
				//替换视频的封面图
				mdc_videofenmian: 'http://api.yfkjqhw.com/uploads/2/images/20190919/9181cfcfd0fd9338d3a00ebbadbe9b7c.jpg',
				// 视频的封面图显示消失的参数
				xiaoshi: false,
				// 视频显示消失的参数
				mdc_show: true,
				putCid:0,
				crateTime:''
			};
		},
		onLoad(options) {
			let that = this;
			uni.getStorage({
				key: 'authorize',
				success: function(res) {
					that.authorize = res.data;
				}
			});
			that.putCid = options.cid
			that.loadData();
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			loadData() {
				let that = this;
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: this.$requestApi.storeInfo,
						data: {
							cid: that.putCid
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.infoData = _data.result;
							that.mdc_video = _data.result.shop_video;
							that.mdc_videofenmian = _data.result.shop_image[0]
							that.distanceStr = distance(that.authorize.latitude, that.authorize.longitude, _data.result.lat, _data.result.lng);
							that.rate = that.getStar(_data.result.shop_level_star);
							that.rateOff = that.getStar(6 - _data.result.shop_level_star);
							that.crateTime = js_date_time(_data.result.create_at);
							that.bannerList = _data.result.shop_image.slice(0,10);
						}
					})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			back() {
				this.$Router.back(1)
			},
			navTo(url) {
				if (url == 'storeZz') {
					this.$Router.push({
						name: url,
						params: this.infoData.shopCredentials
					});
				} else {
					this.$Router.push({
						name: url
					});
				}

			},
			// 关注店铺
			guanZhu(type) {
				let that = this;
				let url = '';
				let cid = 0;
				if(type==0){
					that.infoData.is_follow=1;
					url = that.$requestApi.attention;
					cid = that.infoData.cid;
				}else{
					that.infoData.is_follow=0;
					url = that.$requestApi.cancleAttention;
					cid = [that.infoData.cid];
				}
				
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: url,
						data: {
							cid:cid
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							console.log('success')
						}
					})
			},
			// 查看地址
			clickAddress() {
				uni.openLocation({
					latitude: parseFloat(this.infoData.lat),
					longitude: parseFloat(this.infoData.lng),
					success: function() {
						console.log('success');
					},
				});
			},
			// 拨打电话
			getPhoneNumber() {
				getPhoneNumber(this.infoData.serviceTel);
			},
			// 封面点击的时候相应的操作  获取视频在JS里的参数属性 
			//重点：点击图片接下来视频进行播放，但是视频播放后直接触发了视频的pause() 结局的方案是，延时150ms后再进行视频的播放，就完美解决了
			bindPlay() {
				var that = this;
				that.videoContext = uni.createVideoContext('mdcVideo');
				// that.videoContext.play()
				that.videoContext.pause();
				setTimeout(function() {

					that.videoContext.play()
				}, 150);
				that.xiaoshi = true;
				that.mdc_show = false;
			},
			//安卓系统能检测到 video touchemove 滑动的x距离，已此作为切换的swiper的凭证
			//ios系统，检测不到video touchemove 滑动的x距离，通过cover-view 点击事件进行切换
			mdc_move1(e) {
				var that = this;
				that.videoContext = uni.createVideoContext('mdcVideo');
				if (e.touches[0].clientX > 20) {
					// that.videoContext.pause();
					that.xiaoshi = false;
					that.mdc_show = true;
				}
			},
			returnquanping: function(e) {
				var that = this;
				that.xiaoshi = false;
				that.mdc_show = true;
			},
			// 预览图片
			preImg(item, items) {
				// 预览图片
				uni.previewImage({
					current: item,
					urls: items,
					indicator: 'default',
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});

			},
			getStar(num) {
				var arr = []
				for (var i = 0; i < num; i++) {
					if (num == 0) {
						return;
					} else {
						arr.push(i + 1)
					}
				}
				return arr;
			}
		},

	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: #fff;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 540upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 540upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		right: 0;
		bottom: 60upx;
		width: 110upx;
		height: 50upx;
		align-items: center;
		justify-content: center;
		border-radius: 30upx 0 0 30upx;
		background-color: rgba(11, 14, 17, .4);
		font-size: 26rpx;
		color: #fff;
	}

	.box-content {
		position: relative;
		top: -10upx;

	}

	.nav {
		position: relative;
		margin-top: 30upx;
		padding: 0 30rpx;

		.navigator {
			padding: 30upx 0;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 32upx;
				height: auto;
				margin-right: 20upx;
			}

			.navigator-text {
				flex: 0 0 600upx;
				font-size: 28upx;
				color: #0B0E11;
			}

			.navigator-text2 {
				font-size: 28upx;
				color: #999;
			}


			.navigator-info {
				position: absolute;
				right: 56upx;
				color: #D1D1D6;
				font-size: 30upx;
			}

			.navigator-arrow {
				position: relative;
			}

			.navigator-arrow:after {
				content: " ";
				display: inline-block;
				height: 18upx;
				width: 18upx;
				border-width:4upx 4upx 0 0;
				border-color: #D1D1D6;
				border-style: solid;
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -8upx;
				right: 0upx;
			}
		}
	}

	.store-info {
		position: relative;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 30upx 30upx 0;
		border-radius: 10upx 10upx 0 0;

		.info-left {
			width: 100upx;
			height: 100upx;
			border-radius: 10upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
	}

	.store-info .info-right {
		width: 560upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.info1 {
			display: flex;
			align-items: center;
			position: relative;
		}

		.info2 {
			display: flex;
			align-items: center;

			image {
				width: 20upx;
				height: auto;
				margin-right: 14upx;
			}
		}

		.concern {
			display: inline-block;
			border-radius: 50upx;
			width: 130rpx;
			text-align: center;
			padding: 7upx 0;
			border: 1px solid rgba(11, 14, 17, 1);
			color: #0B0E11;
			font-size: 24upx;
			position: absolute;
			right: 30rpx;
			top: 52rpx
		}

		.concern2 {
			display: inline-block;
			border-radius: 50upx;
			width: 130rpx;
			text-align: center;
			padding: 7upx 0;
			background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
			color: #fff;
			font-size: 24upx;
			position: absolute;
			right: 30rpx;
			top: 52rpx
		}

	}

	.store-rate {
		padding: 0 30rpx;
		position: relative;
		margin-top: 30rpx;

		image {
			width: 20upx;
			height: auto;
			margin-left: 10upx;
		}
	}

	.store-describe {
		padding: 0 30rpx;
		margin-top: 60rpx;
	}

	.more-img {
		padding: 0 30rpx;
		margin-top: 60rpx;

		.image {
			width: 100%;
			height: 100%;
			border-radius: 32rpx;
		}

		.update-info {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.more-click {
		width: 320rpx;
		height: 80rpx;
		display: flex;
		margin: 90rpx auto;
		background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		box-shadow: 0px 10px 30px rgba(255, 68, 0, 0.2);
		border-radius: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #fff;

	}
</style>
